'use strict';
angular.module ('com.module.sandbox')
  .controller ('AutoFieldsCtrl', function ($scope, $state, $log) {

  $scope.user = {
    username: '',
    email: 'test@test.com',
    gender: null,
    genderCheck: null,
    bio: '',
    website: '',
    number: 1,
    birthdate: new Date (),
    password: '',
    confirmPassword: '',
    rememberMe: false
  };

  $scope.schema = [
    {
      property: 'username',
      type: 'text',
      attr: {ngMinlength: 4, required: true},
      msgs: {minlength: 'Needs to have at least 4 characters'}
    },
    {
      property: 'email',
      type: 'email',
      help: 'Don\'t worry we won\'t spam your inbox',
      attr: {required: true, ngMinlength: 4},
      msgs: {
        required: 'You need an email address',
        email: 'Email address needs to be valid',
        valid: 'Nice email address!'
      }
    },
    {property: 'website', type: 'url', msgs: {url: 'You need a valid url'}},
    {
      property: 'number',
      label: 'Number between 1-10',
      type: 'number',
      attr: {min: 1, max: 10},
      msgs: {min: 'You need a number no less than 1', max: 'You need a number no greater than 10'},
      validate: false
    },
    {property: 'birthdate', type: 'date', attr: {required: true}},
    {property: 'gender', type: 'select', list: 'key as value for (key,value) in genders', attr: {required: true}},
    {
      property: 'genderCheck',
      label: 'Are you really?',
      type: 'select',
      list: 'key as value for (key,value) in genderCheck',
      attr: {required: true, ngShow: '$data.gender != null'}
    },
    {property: 'bio', type: 'textarea', rows: 5, placeholder: 'A bit about yourself...', attr: {required: true}},
    {
      type: 'multiple', fields: [
      {property: 'password', type: 'password', attr: {required: true, ngMinlength: 6}},
      {
        property: 'confirmPassword',
        label: 'Confirm Password',
        type: 'password',
        attr: {confirmPassword: 'user.password', required: true, ngMinlength: 6},
        msgs: {match: 'Your passwords need to match'}
      }
    ], columns: 6
    },
    {property: 'rememberMe', label: 'Stay signed in', type: 'checkbox'}
  ];

  $scope.options = {
    validation: {
      enabled: true,
      showMessages: false
    },
    layout: {
      type: 'basic',
      labelSize: 3,
      inputSize: 9
    }
  };

  $scope.genders = {
    0: 'Male',
    1: 'Female'
  };

  $scope.genderCheck = {
    0: 'No',
    1: 'Yes'
  };

  $scope.toggleValidation = function () {
    $scope.options.validation.enabled = !$scope.options.validation.enabled;
  };

  $scope.togglePopovers = function () {
    $scope.options.validation.showMessages = !$scope.options.validation.showMessages;
  };



  $scope.toggleHorizontal = function () {
    $scope.options.layout.type = $scope.options.layout.type === 'horizontal' ? 'basic' : 'horizontal';
  };

  $scope.addField = function () {
    $scope.schema.push ({property: 'new' + (new Date ().getTime ()), label: 'New Field'});
  };

  $scope.join = function () {
    if (!$scope.joinForm.$valid) {
      return;
    }
    //join stuff....
    $log.info ($scope.user);
    console.log('You\'ve joined!\n\nSee console for additional info.');
  };
})
.directive ('confirmPassword', [
  function () {
    return {
      restrict: 'A',
      require: 'ngModel',
      link: function (scope, element, attrs, ngModel) {
        var validate = function (viewValue) {
          var password = scope.$eval (attrs.confirmPassword);
          ngModel.$setValidity ('match', ngModel.$isEmpty (viewValue) || viewValue === password);
          return viewValue;
        };
        ngModel.$parsers.push (validate);
        scope.$watch (attrs.confirmPassword, function () {
          validate (ngModel.$viewValue);
        });
      }
    };
  }
]);



